import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Typography } from 'antd'
import { getGoodsListByPage } from '@/services/stock-goods/api';
import { showMsg } from '@/utils/utils';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

interface BrandDetailProps {
  record: STOCKGOODSAPI.BrandItem;
  handleModalVisible: (visible: boolean) => void;
}

const BrandDetail: React.FC<BrandDetailProps> = (props) => {
  const { record, handleModalVisible } = props;
  // 总数
  const [total, setTotal] = useState<number>(0);
  // 当前页
  const [currentPage, setCurrentPage] = useState<number>(1);
  // 每页显示记录数
  const [pageSize, setPageSize] = useState<number>(10);
  
  // 列
  const columns: ProColumns<STOCKGOODSAPI.GoodsItem>[] = [
    {
      title: '品类',
      dataIndex: 'class_name'
    },
    {
      title: '商品名称',
      dataIndex: 'goods_name'
    },
    {
      title: '商品编号',
      dataIndex: 'goods_id'
    }
  ]

  //  商品列表
  const [goodsList, setGoodsList] = useState<STOCKGOODSAPI.GoodsItem[]>([]);

  // 获取商品列表
  const fetchGoodsList = (params: {current:number; pageSize: number;}) => {
    getGoodsListByPage({
      current: params.current, 
      pageSize: params.pageSize,
      brand_id: record.brand_id
    }).then((data: STOCKGOODSAPI.GoodsItemList)=> {
      setGoodsList(data.record_list as STOCKGOODSAPI.GoodsItem[]);
      setTotal(data.sum_record_num || 0);
    }).catch(error => {
      showMsg(error?.data?.errmsg);
    });
  }

  useEffect(() => {
    if (record.brand_id) {
      fetchGoodsList({current: currentPage, pageSize});
    }
  }, [record]);

  return <Modal
      title="品牌详情"
      width="70%"
      maskClosable={false}
      footer={null}
      onCancel={() => handleModalVisible(false)}
      visible>
      <div className="dialog">
        <Descriptions>
          <Descriptions.Item label="品牌名称">{record.brand_name}</Descriptions.Item>
          <Descriptions.Item label="检索码">{record.brand_py}</Descriptions.Item>
        </Descriptions>
       
        <ProTable
          rowKey="goods_id"
          bordered
          title={() => '品牌下商品'}
          className={'update-goods-table'}
          columns={columns}
          dataSource={goodsList}
          search={false}
          options={false}
          pagination={{ 
            total, 
            showQuickJumper: true, 
            current: currentPage, 
            pageSize,
            onChange: (current) => {
              setCurrentPage(current);
              fetchGoodsList({current, pageSize});
            },

            onShowSizeChange: (pageSize) => {
              setPageSize(pageSize);
              fetchGoodsList({current: currentPage, pageSize});
            }
          }} />
      </div>
    </Modal>
}
export default BrandDetail;
